<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <Actions @save="handlerSaveGroup" :group="group" class="actions-container" />

      <BasicForm ref="basicFormRef" :group="group" />

      <a-divider />

      <PositionForm :group="group" />

      <a-divider />
      <Roles ref="rolesRef" :group="group" />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getGroup } from '@/api/flow/group'
import Actions from './Actions.vue'
import BasicForm from './Basic.vue'
import PositionForm from './Position'
import Roles from './Roles'

export default {
  data () {
    return {
      group: {},
    }
  },

  created () {
  },

  components: {
    Actions,
    BasicForm,
    PositionForm,
    Roles,
  },

  methods: {
    // 保存群组
    handlerSaveGroup () {
      const basicFormRef = this.$refs.basicFormRef
      const rolesRef = this.$refs.rolesRef

      basicFormRef.handleSubmit()
        .then(() => {
          rolesRef.handleSubmit()
            .then(() => {
              this.$notification.success({ message: '修改成功!' })
            })
        })
    },

    // 获取群组
    getGroup () {
      return new Promise((resolve, reject) => {
        getGroup(this.gid)
          .then(data => {
            resolve(data)
          })
          .catch(error => {
            resolve(error)
          })
      })
    },
  },
}

</script>

<style lang="scss" scoped>
.actions-container {
  margin-bottom: $margin-md;
}
</style>
